Angular CLI

Angular CLI (Angular Command Line Interface) হলো Angular অ্যাপ্লিকেশন তৈরি এবং পরিচালনার জন্য একটি শক্তিশালী টুল। এটি Angular ডেভেলপমেন্ট প্রক্রিয়াকে অনেক সহজ করে তোলে, কারণ এটি কমান্ড লাইন থেকে বিভিন্ন কাজ স্বয়ংক্রিয়ভাবে সম্পাদন করতে সহায়তা করে। Angular CLI ব্যবহার করে আপনি দ্রুত অ্যাপ্লিকেশন তৈরি করতে, সার্ভার চালাতে, টেস্টিং করতে, বিল্ড করতে, ডিপ্লয় করতে এবং আরও অনেক কিছু করতে পারেন।

Angular CLI ইনস্টলেশন

Angular CLI ইনস্টল করতে, আপনাকে Node.js এবং npm (Node Package Manager) আগে ইনস্টল করতে হবে। একবার আপনি Node.js ইনস্টল করলে, Angular CLI ইনস্টল করতে নিম্নলিখিত কমান্ডটি চালাতে হবে:

npm install -g @angular/cli

এটি Angular CLI কে গ্লোবালি ইনস্টল করবে, যাতে আপনি যেকোনো ডিরেক্টরি থেকে Angular প্রজেক্ট তৈরি এবং পরিচালনা করতে পারেন।

Angular CLI এর প্রধান কমান্ড

Angular CLI-তে বিভিন্ন কমান্ড রয়েছে, যা আপনাকে অ্যাপ্লিকেশন ডেভেলপমেন্টে সাহায্য করবে। কিছু গুরুত্বপূর্ণ কমান্ডের মধ্যে:

১. অ্যাপ্লিকেশন তৈরি করা (Create a new application)

নতুন Angular অ্যাপ্লিকেশন তৈরি করতে:

ng new my-angular-app

এটি নতুন একটি Angular অ্যাপ্লিকেশন তৈরি করবে, যার নাম my-angular-app। CLI আপনাকে অ্যাপ্লিকেশনের সেটআপের জন্য কিছু কনফিগারেশন চেয়ে নির্দেশনা দিবে (যেমন, Angular Routing, CSS/SCSS নির্বাচন ইত্যাদি)।

২. অ্যাপ্লিকেশন চালানো (Run the application)

অ্যাপ্লিকেশন তৈরি হওয়ার পর, আপনি এটি লোকাল সার্ভারে চালাতে পারেন:

cd my-angular-app
ng serve

এটি Angular অ্যাপ্লিকেশনকে localhost:4200 এ চালু করবে এবং আপনি ব্রাউজারে গিয়ে এটি দেখতে পাবেন।

৩. নতুন কম্পোনেন্ট তৈরি করা (Generate a new component)

Angular CLI দিয়ে নতুন কম্পোনেন্ট তৈরি করতে:

ng generate component component-name

অথবা সংক্ষিপ্তভাবে:

ng g c component-name

এটি একটি নতুন কম্পোনেন্ট তৈরি করবে এবং সংশ্লিষ্ট ফাইলগুলো (HTML, CSS, TS, spec) স্বয়ংক্রিয়ভাবে তৈরি করবে।

৪. নতুন সার্ভিস তৈরি করা (Generate a new service)

এটি একটি নতুন সার্ভিস তৈরি করবে:

ng generate service service-name

অথবা সংক্ষিপ্তভাবে:

ng g s service-name

এটি একটি সার্ভিস তৈরি করবে এবং সেই সার্ভিসের জন্য প্রয়োজনীয় ফাইলগুলো তৈরি করবে।

৫. অ্যাপ্লিকেশন বিল্ড করা (Build the application)

অ্যাপ্লিকেশনটি প্রোডাকশন পরিবেশের জন্য বিল্ড করতে:

ng build --prod

এটি অ্যাপ্লিকেশনের জন্য প্রোডাকশন-গ্রেড ফাইল তৈরি করবে, যা ডিপ্লয়মেন্টের জন্য প্রস্তুত।

৬. টেস্ট চালানো (Run tests)

Angular CLI দিয়ে অ্যাপ্লিকেশন টেস্ট করতে:

ng test

এটি টেস্ট ফ্রেমওয়ার্কের মাধ্যমে সমস্ত টেস্ট রান করবে এবং ফলাফল দেখাবে।

৭. এন্ড টু এন্ড টেস্ট চালানো (Run end-to-end tests)

এন্ড টু এন্ড টেস্ট চালানোর জন্য:

ng e2e

এটি এন্ড-টু-এন্ড টেস্ট চালাবে, যা পুরো অ্যাপ্লিকেশনটি সিমুলেটেডভাবে টেস্ট করবে।

৮. অ্যাপ্লিকেশন ডিপ্লয় করা (Deploy the application)

Angular CLI এর মাধ্যমে সরাসরি অ্যাপ্লিকেশন ডিপ্লয় করতে সক্ষম হলেও, সাধারণত অ্যাপ্লিকেশনটি প্রথমে build করতে হয় এবং তারপর যেকোনো হোস্টিং সার্ভারে ডিপ্লয় করা হয় (যেমন Firebase, Netlify, বা AWS S3)।

ng deploy

Angular CLI এর অন্যান্য বৈশিষ্ট্য

১. লাইভ রিলোড (Live Reload)

Angular CLI আপনার কোডে কোনো পরিবর্তন করলে ব্রাউজারে অটোমেটিকালি রিফ্রেশ করে, যাতে আপনাকে বারবার ব্রাউজার রিফ্রেশ না করতে হয়। এটি ডেভেলপমেন্ট প্রক্রিয়া অনেক দ্রুত করে তোলে।

২. Angular Routing

Angular CLI-তে ng new কমান্ড ব্যবহার করার সময় আপনি Angular Routing যোগ করতে পারবেন। Routing ব্যবস্থাপনা স্বয়ংক্রিয়ভাবে সেটআপ হয়ে যাবে, যাতে বিভিন্ন পেজের মধ্যে নেভিগেশন করা যায়।

৩. লিন্টিং এবং ফরম্যাটিং (Linting and Formatting)

Angular CLI-এর মাধ্যমে আপনি আপনার কোডে লিন্টিং চালাতে পারেন যাতে কোডের মান বজায় থাকে। কোড ফরম্যাটিং সম্পর্কিত সমস্যা শনাক্ত করা যায়।

ng lint

৪. স্কেলেবল এবং মডুলার আর্কিটেকচার

Angular CLI একটি স্কেলেবল আর্কিটেকচার তৈরি করতে সাহায্য করে, যার মাধ্যমে আপনি সহজেই বিভিন্ন মডিউল, কম্পোনেন্ট, সার্ভিস এবং ডিরেক্টিভ তৈরি করতে পারেন এবং এগুলিকে মডুলার করে অ্যাপ্লিকেশন পরিচালনা করতে পারেন।

সারাংশ

Angular CLI Angular অ্যাপ্লিকেশন তৈরি এবং পরিচালনার জন্য একটি শক্তিশালী টুল। এটি বিভিন্ন কাজ সহজে এবং দ্রুত করার জন্য অনেক কমান্ড প্রদান করে, যেমন অ্যাপ্লিকেশন তৈরি করা, কম্পোনেন্ট তৈরি করা, টেস্টিং করা, বিল্ড করা এবং ডিপ্লয় করা। Angular CLI ব্যবহার করলে আপনার ডেভেলপমেন্ট প্রক্রিয়া অনেক সহজ ও কার্যকর হয়।

Angular CLI (Command Line Interface) হল Angular অ্যাপ্লিকেশন তৈরি, ডেভেলপমেন্ট, বিল্ড, টেস্ট এবং ডেপ্লয়মেন্ট সহজ করতে ব্যবহৃত একটি টুল। এটি Angular এর অফিসিয়াল টুলিং, যা Angular অ্যাপ্লিকেশন ব্যবস্থাপনা এবং ডেভেলপমেন্টের জন্য বিভিন্ন কার্যক্রমের মাধ্যমে দ্রুত কাজ করার সুযোগ দেয়।

Angular CLI দিয়ে সহজে কমান্ড লাইন থেকে Angular অ্যাপ্লিকেশন পরিচালনা করা যায়। এখানে কিছু কমন Angular CLI কমান্ডস দেয়া হল যা প্রতিদিনের ডেভেলপমেন্টের জন্য খুবই প্রয়োজনীয়।

১. Angular অ্যাপ্লিকেশন তৈরি করা

ng new my-app

এই কমান্ডটি একটি নতুন Angular অ্যাপ্লিকেশন তৈরি করে যার নাম my-app। কমান্ডটি রান করার পর Angular CLI আপনাকে কিছু কনফিগারেশন অপশন (যেমন SCSS ব্যবহার, লিন্টিং, ইত্যাদি) জিজ্ঞেস করবে।

২. অ্যাপ্লিকেশন রান করা (Development Server)

ng serve

এই কমান্ডটি Angular অ্যাপ্লিকেশন চালু করে এবং ওয়েব ব্রাউজারে http://localhost:4200 ঠিকানায় অ্যাপ্লিকেশনটি দেখায়। ডেভেলপমেন্ট পরিবেশে কাজ করার জন্য এটি খুবই উপকারী। এতে আপনার কোডে যেকোনো পরিবর্তন করলে স্বয়ংক্রিয়ভাবে পেজ রিফ্রেশ হয়ে যায়।

৩. নতুন কম্পোনেন্ট তৈরি করা

ng generate component component-name

অথবা

ng g c component-name

এই কমান্ডটি একটি নতুন কম্পোনেন্ট তৈরি করে। এখানে component-name হল আপনার কম্পোনেন্টের নাম। এটি একটি নতুন কম্পোনেন্ট তৈরি করবে এবং উপযুক্ত ফাইল (TS, HTML, CSS, spec.ts) তৈরি করবে।

৪. নতুন সার্ভিস তৈরি করা

ng generate service service-name

অথবা

ng g s service-name

এই কমান্ডটি একটি নতুন সার্ভিস তৈরি করে। service-name হলো আপনার সার্ভিসের নাম। সার্ভিস ফাইলটি তৈরি হবে এবং এটি ক্লাসের মাধ্যমে ডিপেন্ডেন্সি ইনজেকশন সমর্থন করবে।

৫. নতুন ডিরেক্টিভ তৈরি করা

ng generate directive directive-name

অথবা

ng g d directive-name

এই কমান্ডটি একটি নতুন ডিরেক্টিভ তৈরি করবে। ডিরেক্টিভ ফাইলের মধ্যে Angular ডিরেক্টিভের লজিক থাকবে।

৬. নতুন পাইপ তৈরি করা

ng generate pipe pipe-name

অথবা

ng g p pipe-name

এই কমান্ডটি একটি নতুন পাইপ তৈরি করবে। পাইপ ডেটা ট্রান্সফরমেশন করার জন্য ব্যবহৃত হয়।

৭. নতুন মডিউল তৈরি করা

ng generate module module-name

অথবা

ng g m module-name

এই কমান্ডটি একটি নতুন মডিউল তৈরি করবে। মডিউল ফাইলের মধ্যে অ্যাপ্লিকেশনের বিভিন্ন ফিচার বা ফাংশনালিটি একত্রিত করা হয়।

৮. অ্যাপ্লিকেশন বিল্ড করা (Production Build)

ng build --prod

এই কমান্ডটি অ্যাপ্লিকেশনটি প্রোডাকশন পরিবেশের জন্য বিল্ড করবে। এটি কোড মিনিফাই এবং অপটিমাইজ করবে যাতে অ্যাপ্লিকেশনটি দ্রুত লোড হয়। বিল্ড আউটপুট dist/ ফোল্ডারে রাখা হবে।

৯. টেস্ট চালানো

ng test

এই কমান্ডটি Angular অ্যাপ্লিকেশনের টেস্ট রান করবে। এটি Karma টেস্ট রানার ব্যবহার করে টেস্টগুলো চালাবে এবং আপনার টেস্ট কভারেজ দেখাবে।

১০. ইন্ডিভিজুয়াল টেস্ট ফাইল চালানো

ng test --main=test-file.spec.ts

এটি নির্দিষ্ট একটি টেস্ট ফাইল চালাতে ব্যবহৃত হয়।

১১. অ্যাপ্লিকেশন ডিপ্লয় করা

ng deploy

এই কমান্ডটি অ্যাপ্লিকেশনটি আপনার সিলেক্টেড ডিপ্লয়মেন্ট প্ল্যাটফর্মে (যেমন Firebase, GitHub Pages ইত্যাদি) ডিপ্লয় করবে। ডিপ্লয় করার জন্য আপনাকে angular.json ফাইলের মধ্যে ডিপ্লয়মেন্ট সেটআপ করতে হবে।

১২. অ্যাপ্লিকেশনের সংস্করণ দেখা

ng version

এই কমান্ডটি Angular অ্যাপ্লিকেশনের বর্তমান সংস্করণ, ডিপেন্ডেন্সি এবং অন্যান্য কনফিগারেশন সম্পর্কিত তথ্য দেখাবে।

১৩. অ্যাপ্লিকেশন আপগ্রেড করা

ng update

এটি Angular অ্যাপ্লিকেশন এবং এর ডিপেন্ডেন্সি আপগ্রেড করার জন্য ব্যবহৃত হয়। এটি Angular এর নতুন ভার্সনে অ্যাপ্লিকেশনটি আপডেট করতে সাহায্য করে।

১৪. নতুন অ্যাঙ্গুলার লাইব্রেরি তৈরি করা

ng generate library library-name

অথবা

ng g lib library-name

এই কমান্ডটি একটি নতুন Angular লাইব্রেরি তৈরি করবে, যা পুনঃব্যবহারযোগ্য কোডের সেট হতে পারে।

১৫. অ্যাপ্লিকেশন অ্যাডমিন কনসোল চালু করা

ng e2e

এটি একটি এন্ড-টু-এন্ড (E2E) টেস্টিং টুল চালু করবে যা Protractor ব্যবহার করে Angular অ্যাপ্লিকেশনের ফাংশনালিটি পরীক্ষা করে।

সারাংশ

Angular CLI অনেক শক্তিশালী এবং ডেভেলপমেন্ট প্রক্রিয়া সহজ করতে একাধিক কমান্ড প্রদান করে। CLI ব্যবহার করে দ্রুত নতুন অ্যাপ্লিকেশন তৈরি, কম্পোনেন্ট, সার্ভিস, মডিউল ইত্যাদি তৈরি করা, অ্যাপ্লিকেশন বিল্ড এবং টেস্টিং করা সহজ হয়।

Angular CLI (Command Line Interface) একটি শক্তিশালী টুল যা Angular অ্যাপ্লিকেশন তৈরি, বিল্ড, টেস্ট, এবং ডিপ্লয় করার জন্য ব্যবহৃত হয়। এটি আপনার কাজ সহজ করে তোলে এবং অটোমেটেড টাস্ক সম্পাদন করতে সাহায্য করে। CLI দিয়ে আপনি কম্পোনেন্ট, সার্ভিস, মডিউল এবং অন্যান্য Angular উপাদান খুব সহজে তৈরি করতে পারেন।

কম্পোনেন্ট তৈরি

Angular CLI দিয়ে কম্পোনেন্ট তৈরি করার জন্য নিচের কমান্ড ব্যবহার করতে হয়:

ng generate component component-name

অথবা শর্টফর্মে:

ng g c component-name

এখানে component-name হল আপনার কম্পোনেন্টের নাম।

উদাহরণ:

ধরা যাক, আপনি header নামের একটি কম্পোনেন্ট তৈরি করতে চান:

ng g c header

এই কমান্ডটি রান করার পর, CLI স্বয়ংক্রিয়ভাবে একটি নতুন ফোল্ডার তৈরি করবে এবং এর মধ্যে এই ফাইলগুলো তৈরি করবে:

• header.component.ts: কম্পোনেন্টের টাইপস্ক্রিপ্ট ফাইল।
• header.component.html: কম্পোনেন্টের HTML টেমপ্লেট।
• header.component.css: কম্পোনেন্টের স্টাইলশীট।
• header.component.spec.ts: কম্পোনেন্টের জন্য টেস্ট ফাইল।

সার্ভিস তৈরি

Angular CLI দিয়ে সার্ভিস তৈরি করার জন্য নিচের কমান্ড ব্যবহার করা হয়:

ng generate service service-name

অথবা শর্টফর্মে:

ng g s service-name

এখানে service-name হলো সার্ভিসের নাম।

উদাহরণ:

ধরা যাক, আপনি data নামের একটি সার্ভিস তৈরি করতে চান:

ng g s data

এই কমান্ডটি রান করার পর, CLI স্বয়ংক্রিয়ভাবে একটি নতুন সার্ভিস ফাইল তৈরি করবে:

• data.service.ts: সার্ভিসের টাইপস্ক্রিপ্ট ফাইল।
• data.service.spec.ts: সার্ভিসের জন্য টেস্ট ফাইল।

আপনি এই সার্ভিসে ডেটা পরিচালনা বা HTTP রিকোয়েস্টের মতো কাজ করতে পারবেন।

মডিউল তৈরি

Angular CLI দিয়ে মডিউল তৈরি করতে হলে নিচের কমান্ড ব্যবহার করতে হয়:

ng generate module module-name

অথবা শর্টফর্মে:

ng g m module-name

এখানে module-name হলো মডিউলের নাম।

উদাহরণ:

ধরা যাক, আপনি user নামের একটি মডিউল তৈরি করতে চান:

ng g m user

এই কমান্ডটি রান করার পর, CLI একটি নতুন মডিউল ফাইল তৈরি করবে:

• user.module.ts: মডিউলটির টাইপস্ক্রিপ্ট ফাইল।

এছাড়া, আপনি যদি কম্পোনেন্ট, সার্ভিস বা পাইপ মডিউলে স্বয়ংক্রিয়ভাবে যুক্ত করতে চান, তাহলে --module অপশন ব্যবহার করতে পারেন:

ng g c user/profile --module=user

এটি user মডিউলে একটি নতুন profile কম্পোনেন্ট তৈরি করবে।

একাধিক উপাদান একসাথে তৈরি করা

Angular CLI দিয়ে একসাথে একাধিক উপাদান (কম্পোনেন্ট, সার্ভিস, মডিউল ইত্যাদি) তৈরি করা সম্ভব। যেমন:

ng g c user/profile
ng g s user/data
ng g m user

এভাবে একসাথে profile কম্পোনেন্ট, data সার্ভিস, এবং user মডিউল তৈরি করা সম্ভব।

উপসংহার

Angular CLI এর মাধ্যমে কম্পোনেন্ট, সার্ভিস এবং মডিউল তৈরি করা খুবই সহজ এবং দ্রুত। এটি ডেভেলপমেন্ট প্রক্রিয়াকে আরো সুশৃঙ্খল এবং প্রোডাকটিভ করে তোলে, কারণ এটি কোডের অটোমেশন এবং স্ট্রাকচারাল গঠন নিশ্চিত করে।

Angular CLI Workspaces একটি কনসেপ্ট যা একাধিক Angular অ্যাপ্লিকেশন এবং লাইব্রেরি একটি একক প্রজেক্টে পরিচালনা করার সুযোগ দেয়। এটি বিশেষভাবে Monorepo আর্কিটেকচারে সহায়ক, যেখানে একাধিক অ্যাপ্লিকেশন বা লাইব্রেরি একসাথে পরিচালিত হয় এবং তাদের মধ্যে পুনঃব্যবহারযোগ্য কোড শেয়ার করা যায়। Angular CLI Workspaces মূলত multiple apps বা libraries তৈরি এবং পরিচালনা করার জন্য ব্যবহৃত হয়।

Workspaces তৈরি করা

Angular CLI দিয়ে একটি নতুন Workspace তৈরি করতে হলে, প্রথমে ng new কমান্ডটি ব্যবহার করতে হবে, তবে এখানে --create-application অপশনটি ব্যবহার করা যাবে না। কারণ Workspaces তৈরি করার সময় আপনি নির্ধারণ করতে পারবেন যে আপনার প্রজেক্টে একটি অ্যাপ্লিকেশন থাকবে কি না।

Workspace তৈরি করার কমান্ড:

ng new my-workspace --create-application=false

এটি একটি নতুন Angular Workspace তৈরি করবে, যেখানে আপনি ভবিষ্যতে একাধিক অ্যাপ্লিকেশন এবং লাইব্রেরি যোগ করতে পারবেন।

Workspace structure:

এটি নিম্নলিখিত ফোল্ডার স্ট্রাকচার তৈরি করবে:

my-workspace/
  ├── projects/
  ├── angular.json
  ├── package.json
  ├── tsconfig.json
  ├── tslint.json

• projects/: এখানে আপনি আপনার অ্যাপ্লিকেশন এবং লাইব্রেরি গুলি রাখবেন।
• angular.json: পুরো Workspace এবং এর কনফিগারেশন সম্পর্কিত ফাইল।
• package.json: প্রজেক্টের সমস্ত ডিপেনডেন্সি এবং স্ক্রিপ্ট সম্পর্কিত তথ্য।

Multiple Apps and Libraries in a Workspace

একটি Angular Workspace তে একাধিক অ্যাপ্লিকেশন এবং লাইব্রেরি রাখা যেতে পারে। অ্যাপ্লিকেশন এবং লাইব্রেরি অ্যাড করতে, Angular CLI এর ng generate বা ng g কমান্ড ব্যবহার করতে হয়।

নতুন অ্যাপ্লিকেশন তৈরি করা:

আপনি Workspace এ নতুন অ্যাপ্লিকেশন তৈরি করতে পারেন:

ng generate application app-name

অথবা:

ng g app app-name

এটি একটি নতুন Angular অ্যাপ্লিকেশন তৈরি করবে যা projects/ ফোল্ডারে রাখা হবে।

নতুন লাইব্রেরি তৈরি করা:

Workspace এ নতুন লাইব্রেরি তৈরি করতে:

ng generate library library-name

অথবা:

ng g lib library-name

এটি একটি লাইব্রেরি তৈরি করবে যা অন্যান্য অ্যাপ্লিকেশনে রিইউজ করা যাবে।

Workspace এ কাজ করা

Workspace এ একাধিক অ্যাপ্লিকেশন এবং লাইব্রেরি তৈরি করা হলে, Angular CLI এর মাধ্যমে প্রতিটি অ্যাপ্লিকেশন বা লাইব্রেরি আলাদাভাবে বিল্ড, সার্ভ, টেস্ট করা সম্ভব। উদাহরণস্বরূপ:

অ্যাপ্লিকেশন বিল্ড করা:

ng build app-name

লাইব্রেরি বিল্ড করা:

ng build library-name

অ্যাপ্লিকেশন সার্ভ করা:

ng serve app-name

লাইব্রেরি টেস্ট করা:

ng test library-name

এইভাবে, আপনি একটি Workspace এর মধ্যে বিভিন্ন অ্যাপ্লিকেশন এবং লাইব্রেরির উপর কাজ করতে পারবেন এবং তাদের নির্দিষ্ট প্রক্রিয়াগুলি পরিচালনা করতে পারবেন।

Workspace কনফিগারেশন

Angular CLI Workspace কনফিগারেশনটি মূলত angular.json ফাইলে থাকে। এই ফাইলটি Workspace-এর সমস্ত অ্যাপ্লিকেশন, লাইব্রেরি এবং তাদের কনফিগারেশন সংক্রান্ত তথ্য ধারণ করে। এখানে আপনি অ্যাপ্লিকেশন এবং লাইব্রেরির জন্য বিভিন্ন সেটিংস যেমন বিল্ড কনফিগারেশন, সার্ভিং পোর্ট, টেস্ট কনফিগারেশন ইত্যাদি দেখতে পাবেন।

উদাহরণ: angular.json ফাইল

{
  "projects": {
    "app-name": {
      "projectType": "application",
      "root": "projects/app-name",
      "sourceRoot": "projects/app-name/src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app-name",
            "index": "projects/app-name/src/index.html",
            "main": "projects/app-name/src/main.ts",
            "polyfills": "projects/app-name/src/polyfills.ts",
            "tsConfig": "projects/app-name/tsconfig.app.json",
            "assets": [
              "projects/app-name/src/favicon.ico",
              "projects/app-name/src/assets"
            ]
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app-name:build"
          }
        }
      }
    }
  }
}

এখানে, app-name অ্যাপ্লিকেশনের জন্য কনফিগারেশন রয়েছে, যেখানে তার বিল্ড এবং সার্ভ অপশন উল্লেখ করা হয়েছে।

Angular Workspace এর সুবিধা

1. Monorepo আর্কিটেকচার: একাধিক অ্যাপ্লিকেশন এবং লাইব্রেরি একটি একক রিপোজিটরিতে থাকতে পারে, যা কোড শেয়ারিং এবং ডিপেনডেন্সি ম্যানেজমেন্টকে সহজ করে তোলে।
2. কোড পুনঃব্যবহারযোগ্যতা: লাইব্রেরি তৈরি করে একাধিক অ্যাপ্লিকেশনে কোড পুনঃব্যবহার করা সম্ভব।
3. স্বয়ংক্রিয় বিল্ড ও সার্ভ: Angular CLI দিয়ে বিভিন্ন অ্যাপ্লিকেশন এবং লাইব্রেরির বিল্ড, সার্ভ এবং টেস্টিং প্রক্রিয়া সহজ হয়ে যায়।
4. স্কেলেবল প্রজেক্ট ম্যানেজমেন্ট: বড় প্রকল্পের জন্য Angular CLI Workspaces খুবই উপকারী, কারণ এটি উন্নত স্কেলেবল প্রজেক্ট ম্যানেজমেন্ট সরবরাহ করে।

উপসংহার

Angular CLI Workspaces বড় Angular প্রজেক্টে একাধিক অ্যাপ্লিকেশন এবং লাইব্রেরি পরিচালনার জন্য খুবই কার্যকরী। এটি Monorepo আর্কিটেকচারের সুবিধা প্রদান করে, যেখানে বিভিন্ন অ্যাপ্লিকেশন এবং লাইব্রেরি একত্রে কাজ করতে পারে, কোড শেয়ারিং এবং রিইউজকে সহজ করে তোলে। Angular CLI Workspaces ডেভেলপারদের জন্য প্রজেক্ট ম্যানেজমেন্ট এবং স্কেলিং প্রক্রিয়া আরও সহজ করে দেয়।

Angular অ্যাপ্লিকেশন তৈরি করার পর, আপনাকে অ্যাপ্লিকেশনটি বিল্ড এবং সার্ভ করতে হবে যাতে এটি আপনার পছন্দসই পরিবেশে (local, staging, production) কার্যকরী হয়। Angular CLI আপনাকে এটি সহজভাবে করতে সাহায্য করে।

1. Angular অ্যাপ্লিকেশন বিল্ড করা

Angular অ্যাপ্লিকেশনকে বিল্ড করার জন্য Angular CLI-তে ng build কমান্ড ব্যবহার করা হয়। এই কমান্ডটি আপনার অ্যাপ্লিকেশনটি প্রোডাকশনের জন্য প্রস্তুত করবে এবং আপনার অ্যাপ্লিকেশনটি যেসব ফাইলের মাধ্যমে কাজ করবে, সেগুলো dist/ (distribution) ফোল্ডারে তৈরি করবে।

ng build কমান্ড

ng build

এটি আপনার অ্যাপ্লিকেশনটির ডেভেলপমেন্ট (development) বিল্ড তৈরি করবে। ডিফল্টরূপে, বিল্ডটি dist/ ফোল্ডারে থাকবে। dist/ ফোল্ডারের মধ্যে আপনি অ্যাপ্লিকেশনের স্ট্যাটিক ফাইল (HTML, CSS, JavaScript, ইত্যাদি) পাবেন।

প্রোডাকশন বিল্ড তৈরি করা

যদি আপনি প্রোডাকশন পরিবেশের জন্য অ্যাপ্লিকেশনটি প্রস্তুত করতে চান, তাহলে আপনাকে --prod ফ্ল্যাগটি ব্যবহার করতে হবে। এটি আপনার অ্যাপ্লিকেশনের অপটিমাইজড (minified, uglified) সংস্করণ তৈরি করবে।

ng build --prod

এটি কোড মিনিফিকেশন, গাঞ্জাম কোড অপ্টিমাইজেশন এবং অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য অন্যান্য অপটিমাইজেশন করবে।

angular.json কনফিগারেশন

যখন আপনি ng build --prod চালান, Angular CLI আপনার প্রজেক্টের angular.json কনফিগারেশন ফাইলের মধ্যে প্রোডাকশন সেটিংস ব্যবহার করে। আপনি চাইলে এখানে কাস্টম কনফিগারেশনও যুক্ত করতে পারেন (যেমন: fileReplacements এর মাধ্যমে প্রোডাকশন এবং ডেভেলপমেন্ট পরিবেশের জন্য আলাদা কনফিগ ফাইল ব্যবহার করতে পারেন)।

2. অ্যাপ্লিকেশন সার্ভ করা

Angular CLI একটি বিল্ট-ইন সার্ভার সরবরাহ করে, যার মাধ্যমে আপনি ডেভেলপমেন্ট পরিবেশে অ্যাপ্লিকেশনটি দেখতে পারবেন। ng serve কমান্ডটি ব্যবহার করে Angular অ্যাপ্লিকেশনটি লোকাল সার্ভারে রান করতে পারবেন।

ng serve কমান্ড

ng serve

এটি আপনার অ্যাপ্লিকেশনটি লোকাল ডেভেলপমেন্ট সার্ভারে রান করবে এবং আপনি http://localhost:4200/ ঠিকানায় অ্যাপ্লিকেশনটি দেখতে পারবেন।

কিছু অপশন সহ ng serve কমান্ড:

• --port: আপনি পছন্দের পোর্ট নম্বর নির্ধারণ করতে পারেন। ডিফল্ট পোর্ট হল 4200।

  ng serve --port 8080
  

• --open: এটি কমান্ডটি রান করার পর আপনার ব্রাউজারে স্বয়ংক্রিয়ভাবে অ্যাপ্লিকেশনটি খুলে দেবে।

  ng serve --open
  

• --proxy-config: যদি আপনি ব্যাকএন্ড সার্ভারের সাথে কাজ করছেন এবং CORS (Cross-Origin Resource Sharing) সমস্যা মোকাবেলা করছেন, তাহলে আপনি একটি proxy configuration ফাইল ব্যবহার করতে পারেন।

  ng serve --proxy-config proxy.conf.json
  

সার্ভারের স্বয়ংক্রিয় রিলোড

ng serve স্বয়ংক্রিয়ভাবে আপনার ফাইলগুলিতে কোনো পরিবর্তন করলে, তা ব্রাউজারে রিফ্রেশ হয়ে যাবে। এটি ডেভেলপমেন্টের জন্য খুবই উপযোগী, কারণ আপনি কোড পরিবর্তন করলেই ব্রাউজারে পরিবর্তনটি দেখতে পাবেন।

3. প্রোডাকশন পরিবেশে অ্যাপ্লিকেশন হোস্ট করা

প্রোডাকশন পরিবেশে অ্যাপ্লিকেশন হোস্ট করার জন্য, আপনি অ্যাপ্লিকেশনের বিল্ড ফাইলগুলো প্রোডাকশন সাইজে তৈরি করবেন এবং একটি ওয়েব সার্ভারে আপলোড করবেন (যেমন Apache, Nginx, ইত্যাদি)।

অ্যাপ্লিকেশন ডেপ্লয়মেন্টের প্রক্রিয়া:

1. ng build --prod চালিয়ে প্রোডাকশন বিল্ড তৈরি করুন।
2. dist/ ফোল্ডারটি আপনার ওয়েব সার্ভারের ডিরেক্টরিতে কপি করুন।
3. আপনার ওয়েব সার্ভার কনফিগার করুন যাতে এটি অ্যাপ্লিকেশনটি হোস্ট করতে পারে।

উদাহরণস্বরূপ, যদি আপনি Nginx ব্যবহার করেন, আপনি Nginx এর root ডিরেক্টরিতে dist/ ফোল্ডারটি কপি করবেন।

sudo cp -r dist/my-app/* /usr/share/nginx/html/

এখন, আপনার অ্যাপ্লিকেশনটি প্রোডাকশন সার্ভারে হোস্ট করা হয়ে যাবে এবং আপনি এটি ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য করে তুলবেন।

4. Angular CLI বিল্ড এবং সার্ভ কমান্ডের সাথে টিপস

• Angular Universal: যদি আপনি সার্ভার সাইড রেন্ডারিং (SSR) করতে চান, Angular Universal ব্যবহার করতে হবে। এটি Angular অ্যাপ্লিকেশনকে সার্ভার সাইডে রেন্ডার করতে সাহায্য করে এবং SEO (Search Engine Optimization) উন্নত করে।
• HMR (Hot Module Replacement): ng serve --hmr ব্যবহার করলে কোড পরিবর্তন হলে পুরো পেজ রিলোড না হয়ে শুধুমাত্র পরিবর্তিত মডিউল রিলোড হবে।
• Base href: প্রোডাকশন বিল্ডে অ্যাপ্লিকেশনের base href কনফিগার করতে হয়। এটি / হতে পারে অথবা আপনার ডোমেইনের সাবডিরেক্টরি অনুসারে কনফিগার করা যেতে পারে।

<base href="/">

এভাবে আপনি Angular অ্যাপ্লিকেশনটি বিল্ড এবং সার্ভ করতে পারেন এবং প্রোডাকশন পরিবেশে ডেপ্লয় করতে পারবেন।